/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    Button,
    Image,
    AsyncStorage,
    TouchableOpacity
} from 'react-native';
import Android from './components';
import {styles} from './styles';
import PubSub from 'pubsub-js'; //发布、订阅来实现组件间的通信
var MY_TOPIC = "hello";
var showBottom = true;

//图片资源
let source = [
    {
        url: require('./images/bottom/office.png'),
        font: '探索'
    }, {
        url: require('./images/bottom/atm.png'),
        font: '朋友'
    }, {
        url: require('./images/bottom/hot.png'),
        font: '发现'
    }, {
        url: require('./images/bottom/Category.png'),
        font: '我的'
    }
];
let sourceActive = [
    {
        url: require('./images/bottom/office_active.png')
    }, {
        url: require('./images/bottom/atm_active.png')
    }, {
        url: require('./images/bottom/hot_active.png')
    }, {
        url: require('./images/bottom/Category_active.png')
    }
];

export default class MyProject extends Component {
    constructor(props) {
        super(props);
        this.state = {
            position: 0,
            storageObject: '',
            showBottom: showBottom,
            stateSource: [
                {
                    active: true
                }, {
                    active: false
                }, {
                    active: false
                }, {
                    active: false
                }
            ]
        };
        AsyncStorage.getItem('demo', this.storageChange.bind(this));
        this.onPressLearnMore = this.onPressLearnMore.bind(this);
        this.storageChange = this.storageChange.bind(this);
        this.renderAppBottom = this.renderAppBottom.bind(this);
    }
    storageChange(err, res) {
        this.setState({storageObject: res});
        // alert(this.state.storageObject);
    }
    componentDidMount() {
        var _this = this;
        PubSub.subscribe(MY_TOPIC, function(msg, data) {
            _this.setState({
                showBottom: !_this.state.showBottom
            })
        });
    }
    onPressLearnMore(index) {
        const {stateSource} = this.state;
        this.setState({});
        // alert(index);
        var tempArr = [];
        for (var i = 0; i < 4; i++) {
            i == index
                ? tempArr.push({active: true})
                : tempArr.push({active: false})
        }
        this.setState({position: index, stateSource: tempArr})
    }
    renderAppBottom() {
        const {stateSource} = this.state;
        let TouchableArr = [];
        for (var i = 0; i < 4; i++) {
            TouchableArr.push(
                <TouchableOpacity key={i} style={styles.flex1Center} onPress={this.onPressLearnMore.bind(this, i)}>
                    <Image source={stateSource[i].active
                        ? sourceActive[i].url
                        : source[i].url} style={styles.appBottomImage}/>
                    <View>
                        <Text style={stateSource[i].active
                            ? styles.activeColor
                            : {}}>{source[i].font}</Text>
                    </View>
                </TouchableOpacity>
            )
        }
        return TouchableArr;
    }
    render() {
        return (
            <View style={styles.flexColumn}>
                <View style={styles.flex1}>
                    <Android position={this.state.position}></Android>
                </View>
                {this.state.showBottom
                    ? <View style={styles.appBottom}>
                            {this.renderAppBottom()}
                        </View>
                    : <View></View>
}
            </View>
        );
    }
}

console.log(AppRegistry);

AppRegistry.registerComponent('Myproject', () => MyProject);
